{% extends "website/staff/staff_base.html" %}
{% load static %}
{% load role_tags %}
{% block content %}
<div style="display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;">
  <div>
    <h1 style="margin:0;">Patient Timeline</h1>
    <div style="opacity:.75; margin-top:4px;">
      {{ patient.full_name|default:patient }} • ID {{ patient.id }}
    </div>
  </div>
  <div style="display:flex; gap:10px; flex-wrap:wrap;">
    <a class="btn btn-light" href="/staff/emr/patients/{{ patient.id }}/">Back to chart</a>
  </div>
</div>

<div class="olutech-card" style="margin-top:14px;">
  <div style="font-weight:700; margin-bottom:10px;">Activity feed</div>
  <div style="display:flex; flex-direction:column; gap:10px;">
    {% for e in events %}
      <div style="padding:12px; border-radius:14px; border:1px solid rgba(0,0,0,.06); background: rgba(255,255,255,.7);">
        <div style="display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;">
          <div style="font-weight:700;">{{ e.type }} — {{ e.title }}</div>
          <div style="opacity:.7;">{{ e.ts }}</div>
        </div>
        {% if e.detail %}
          <div style="margin-top:6px; opacity:.9;">{{ e.detail }}</div>
        {% endif %}
      </div>
    {% empty %}
      <div style="opacity:.7;">No timeline events yet.</div>
    {% endfor %}
  </div>
</div>
{% endblock %}